<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="border: 1px solid red;padding: 10px;">
        <h1>新闻列表</h1>
        <!-- 引入父组件 -->
         <news-list></news-list>
    </div>

    <!-- 父组件模版 -->
     <template id="news-list-template">
        <ul style="border: 1px solid blue;padding: 10px;">
            <news-item v-for="news in newsArray" :id="news.id" :title="news.title" :content="news.content" @del="del">
            </news-item>
        </ul>
     </template>
    
     <!-- 子组件模版 -->
      <template id="news-item-template">
        <li style="border: 1px solid green;padding: 10px;">
            <span>新闻ID:{{id}}</span>
            <span>标题：{{title}}</span>
            <span>内容：{{content}}</span>
            <span><button @click="delMe(id)">删除</button></span>
        </li>
    </template>
    
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
    <script>
    
    //创建子组件
        const newsItem = {
            //引用子组件模版
            template:'#news-item-template',
            //声明子组件接收父组件传递的值
            props:['id','title','content'],
            methods: {
                delMe(id){
                    //调用父组件传递的方法
                    this.$emit('del',id)
                }
            },
        }
    
        //创建父组件
        const newsList = {
            //引入父组件模版
            template:'#news-list-template',
            //注册子组件
            components:{
                'news-item':newsItem
            },
            data() {
                return {
                    newsArray:[
                        // {id:1,title:'新闻标题1',content:'新闻内容1'},
                        // {id:2,title:'新闻标题2',content:'新闻内容2'},
                        // {id:3,title:'新闻标题3',content:'新闻内容3'}
                    ]
                }
            },
            created() {
                //通常我们会在created中发送请求获取数据
                this.loadNewsList();
            },
            methods:{
                loadNewsList(){
                    axios.get('data/news.json',{
                        params:{
                            //传递参数
                            page:1,
                            size:10
                        },
                        headers:{
                            //请求头信息
                            token:"123456abcdef"
                        }
                    })
                    .then(response => {
                    //获取到新闻列表数据
                    this.newsArray = response.data;
                    })
                },
                del(id){
                    //删除指定id的新闻
                    const index = this.newsArray.findIndex(item => item.id === id);
                    this.newsArray.splice(index,1);
                }
            }
        };
    
        //创建Vue实例，并将父组件注册到Vue实例中
        const app = new Vue({
            el:'#app',
            components:{
                //注册父组件
                'news-list':newsList
            }
        })
      </script>
</body>
</html>